<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
      <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
			<!-- 账户流水 -->
			<div class="table-form">
				<h2 class="lietou-detail-h1"></h2>
				<el-form ref="form" :inline="true" label-width="90px" size="small" style="margin-bottom:20px;">
					<el-form-item label="手机号" label-width="70px">
						<el-input placeholder="请输入手机号" v-model="searchPhone" class="search-input" maxlength="11" clearable></el-input>
					</el-form-item>
					<el-form-item label="公司名称" label-width="70px">
						<el-input placeholder="请输入公司名称" v-model="username" class="search-input"></el-input>
					</el-form-item>
					<el-form-item label="处理状态" class="search-bar">
						<el-select placeholder="请选择" v-model="status" style="width: 90px;">
						    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item style="margin:-2px 0 0 10px;">
						<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
				 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
				 :highlight-current-row="true">
					<el-table-column fixed type="index" label="序列" width="50" column-key="id" align="center"></el-table-column>
					<el-table-column prop="c_mobile" label="手机号" align="center" width="110"></el-table-column>
					<el-table-column prop="c_name" label="公司名称" align="center"></el-table-column>
					<el-table-column prop="money" label="发票金额(元)" align="center"></el-table-column>
					<el-table-column prop="c_shuihao" label="税号" align="center"></el-table-column>
					<el-table-column prop="is_pupiao" label="发票类型" align="center" width="80"></el-table-column>
					<el-table-column prop="is_dianzi" label="开具形式" align="center" width="80"></el-table-column>
					<el-table-column align="center" label="邮箱/邮寄地址" width="130">
						<template slot-scope="scope">
						  <span>{{scope.row.is_dianzi=='电子发票'?scope.row.c_email:scope.row.c_kuaidi_address}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="kuaidi_no" label="快递单号" align="center"></el-table-column>
					<el-table-column prop="create_time" label="申请日期" align="center" width="150"></el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
						  <div v-if="scope.row.is_shenhe=='待审核'">
							<el-button slot="reference" size="small" type="primary" class="handle-btn" @click="onConfirm(scope.row.id, scope.row.is_dianzi)">确认开具</el-button>
							<el-button slot="reference" type="danger" size="small" class="handle-btn" @click="onRefuse(scope.row.id, scope.row.is_dianzi)">拒绝开具</el-button>
						  </div>
						  <span v-else>{{scope.row.is_shenhe}} {{scope.row.reason}}</span>
						</template>
					</el-table-column>
				</el-table>
				<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
					<el-col :span="24" style="text-align:center;margin-top:50px">
						<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount" :current-page="pageNo"
						 @current-change="pageChange">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
  import Breadcrumb from '@/components/Breadcrumb'
  export default {
  	name: 'FinaceTicket',
  	components:{
  		Breadcrumb
  	},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone:'',
        username:'',
				statusList: [{ value: '', label: '全部' },
								{ value: '-1', label: '已取消' }, 
								{ value: '1', label: '待开具' }, 
								{ value: '2', label: '已开具' },
								{ value: '3', label: '已拒绝' }],
				status:'',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10
			}
		},
		async created() {
			this.loadData();
		},
		methods:{
			// 搜索
			searchData(){
				this.pageNo=1;
				this.loadData();
			},
			//分页
			pageChange(val) {
			  this.pageNo = val;
			  this.loadData()
			},
			async loadData() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
				});
			  try {
					let data = {
						"token": this.token,
						"c_mobile": this.searchPhone,
						"c_name": this.username,
						"is_shenhe": this.status,
						"p": this.pageNo, //分页页码
						"size": this.pageSize, //分页每页数量
					}
					let res = await this.$http({
						url: '/man/Invoice/getInvoiceList',
						method: 'post',
						params: data
					});
					this.tableData = res.data;
					this.pageCount = res.max_page; //总页数
					this.pageNo = Number(res.p); //当前页 size当前页
					loading.close();
			  } catch (e) {
				 console.log(e)
				 loading.close();
			  }
			},
			// 拒绝开具
			onRefuse(id, type){
			  this.$prompt('是否拒绝开具发票？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputValidator: (val) => {
					return val != '' && val != null ? true : false
				},
				inputPlaceholder: '请输入拒绝开票原因',
				inputErrorMessage: '请输入拒绝开票原因',
				closeOnHashChange: false,
				closeOnClickModal: false
			  }).then(({ value }) => {
					this.shenheHandle(3, id, type, value, '');
			  }).catch(error => {
			  
			  })
			},
			// 确认开具
			onConfirm(id, type){
				if(type == '电子发票'){
					this.$confirm('是否确认开具发票?', '操作确认', {
						 confirmButtonText: '确定',
						 cancelButtonText: '取消',
						 type: 'warning'
					}).then(value => {
						this.shenheHandle(2, id, type, '', '');
					}).catch(() => {
						
					});
					return;
				}
				this.$prompt('请填写快递单号？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern:  /^\w+$/,
					inputPlaceholder:'请填写快递单号',
					inputErrorMessage: '请填写快递单号',
					closeOnClickModal: false
				}).then(({ value }) => {
					this.shenheHandle(2, id, type, '', value);
				}).catch(error => {
 
			   })
			},
			// 审核操作
			async shenheHandle(done, id, sendtype, reason, value) {
				try {
					let res = await this.$http({
						url: '/man/Invoice/shenheInvoice',
						method: 'post',
						params: {
							"token": this.token,
							"id": id,
							"is_shenhe": done,// 2 已审核 3 已拒绝	2
							"reason": reason, //	string	是	操作原因	
							"fangshi":	sendtype== '电子发票'?1:2,	//是	1 发邮箱 2 发快递	2
							"kuaidi_no": value
						}
					});
					if(sendtype=='电子发票'){
						this.$message({
							type: 'success',
							message: '发票已发送至预留邮箱，请注意查收！'
						});
					}else{
						this.$message({
							type: 'success',
							message: res.msg
						});
					}	
					this.loadData();
				} catch (e) {
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;

		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}

	}
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
	.el-button.buttonStyle2{
	  font-size: 14px;
	  border-radius: 5px;
	  margin-left:15px;
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;

		.lietou-msg{
			width:280px;
			display: flex;
			margin-left:30px;
		}
		.works{
			position: absolute;
			top:20px;
			right:30px;
			color: rgba(33, 120, 241, 1);
		}
		.lietou-number{
			border-left:1px #ddd solid;
			padding-left:30px;
			margin-top:30px;
		}
		.lahei-btn{
			position: absolute;
			right:30px;
			top:25px;
		}
		.acount{
			margin:0 0 20px 30px;
			padding-top:8px;

			span{
				margin-right:50px;
			}
		}
		.answerTable{
			margin:10px auto;
			width: 96%;
		}
		.acount-balance{
			font-size:36px;
			font-weight: 500;
		}
		.submit-btn{
			display: block;
			margin-top:-5px;
		}
	}
	.table-form{
		background-color: #fff;
		padding:0 20px 20px;
	}
	.lietou-detail-h1{
		font-size:17px;
		line-height: 20px;
		font-weight: bold;
		padding:5px 0 5px;
	}
	.search-bar{
		::v-deep{
			.el-form-item__label{
				font-weight: 500;
			}
		}
	}
  .handle-btn{
    border-radius: 5px;
    margin:0 6px;
  }
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
